<template>
	<view class="page">
		<view class="fill">
			<view class="f_position">
				<view class="f_fixed" :style="'background:'+fixBg">
					<view class="flex_align_center top_address">
						<view class="flex_align_center top_location">
							<image src="/static/location.png" class="location_icon"></image>
							<view class="clamp" v-show="address!=''">{{address}}</view>
							<image src="/static/xia.png" class="location_down"></image>
						</view>
						<view class="flex_align_center search" @click="$navTo('/pages/product/search')">
							<image src="https://img.jinghushi.com/images/9/2024/12/qdaXkaxwS7sVOxxf7M7O5FDwFF7fzf.png">
							</image>
							<view class="s_tit">搜索商品名称</view>
						</view>
					</view>
					<view class="flex_between top_cate">
						<scroll-view class="t_cate_list" scroll-x="true" scroll-with-animation="true"
							:scroll-left="scrollLeftTop">
							<view class="t_cate_item" :class="{'t_tag_active':currentIdTop==0}"
								@click="changebigCateTop(0,0)">
								<view class="t_tag_name">全部</view>
							</view>
							<view class="t_cate_item" v-for="(item,index) in cateListTop"
								:class="{'t_tag_active':currentIdTop==item.id}"
								@click="changebigCateTop(item.id,Number(index+1))">
								<view class="t_tag_name">{{item.name}}</view>
							</view>
						</scroll-view>
						<view class="top_cate_all flex_end" @click="$navTo('/pages/category/category')">
							<image src="https://img.jinghushi.com/images/9/2024/12/AeM1F6fkgK8VFV4B87GEPG6y8pAbb1.png">
							</image>
							<view>分类</view>
						</view>
					</view>
				</view>
				<view class="top_backgeound" v-show="currentIdTop==0"
					:style="'background: linear-gradient('+navBgColor+', #FBF8FE)'">
					<swiper class="Jc_swiper" :autoplay="true" :circular="true" :interval="5000" :indicator-dots="false"
						@change="changeNavBgColor">
						<swiper-item class="Jc_swiper_item" v-for="item in info.banner" @click="$navTo(item.link)">
							<image class="Jc_swiper_image" :src="item.thumb" mode="widthFix" />
						</swiper-item>
					</swiper>
					<!-- 分类图标 -->
					<view class="pack" v-if="meunList.length>0">
						<view class="pack_item" v-for="(item,index) in meunList" @click="$navTo(item.url)">
							<view class="pack_img">
								<image :src="item.thumb" role="img"></image>
							</view>
							<text class="pack_title">{{item.title}}</text>
						</view>
					</view>
					<!-- 营销广告 -->
					<view class="super" v-if="info.saleBanner!==undefined&&info.saleBanner.length>0">
						<!-- <block v-for="item in info.saleBanner">
							<image :src="item.thumb" v-if="item.colnum!=4" mode="widthFix" @click="$navTo(item.link)"></image>
							<image :src="item.thumb" v-else style="width: 750rpx;" mode="widthFix" @click="$navTo(item.link)"></image>
						</block> -->
						<block v-for="item in info.saleBanner">
							<image :src="item.thumb" v-if="item.mtype==0"
								:class="{'super_item1':item.colnum==1,'super_item2':item.colnum==2,'super_item3':item.colnum==3,'super_item4':item.colnum==4}"
								:mode="item.colnum==4?'widthFix':''" @click="$navTo(item.link)"></image>
							<view class="d_activity" v-if="item.mtype==1&&item.parentid==0">
								<image class="d_a_big" :src="item.thumb" @click="$navTo(item.link)"></image>
								<view class="d_a_little">
									<image :src="fitem.thumb" v-for="fitem in saleBannerFu" @click="$navTo(fitem.link)"
										v-if="fitem.parentid==item.id"
										:class="{'super_item_fu4':fitem.colnum==4,'super_item_fu3':fitem.colnum==3,'super_item_fu2':fitem.colnum==2,'super_item_fu1':fitem.colnum==1}">
									</image>
								</view>
							</view>
						</block>
					</view>
				</view>
			</view>
		</view>
		<view class="d_content">
			<view id="page_wp" v-show="currentIdTop==0">
				<view class="cate cate_seckill">
					<view class="c_tag_list">
						<view class="c_tag" :class="{'c_tag_active':currSeck==1}" @click="changeSeck(1)">
							<view class="c_tag_name">特卖专场</view>
						</view>
						<view class="c_tag" :class="{'c_tag_active':currSeck==2}" @click="changeSeck(2)">
							<view class="c_tag_name">好物推荐</view>
						</view>
					</view>
				</view>
				<scroll-view class="cate_new" scroll-x="true" scroll-with-animation="true" :scroll-left="scrollLeft"
					v-show="currSeck==1">
					<view class="cate_new_item" v-for="(item,index) in cateList"
						:class="{'cate_new_item_ac':currentId==item.id}" @click="changebigCate(item.id,index)">
						<view class="cate_new_name">{{item.name}}</view>
					</view>
				</scroll-view>
				<!-- <view class="screen">
					<view class="screen_item screen_item_active">销量领先</view>
					<view class="screen_item">折扣优惠</view>
				</view> -->
			</view>
			<view class="seck_list" v-if="!show">
				<view class="seck_item" v-for="item in flashSaleList"
					@click="currSeck==3 ? '' : $navTo('/pages/product/product?id='+item.id)">
					<view class="seck_logo">
						<image :src="item.thumb"></image>
					</view>
					<view class="seck_info">
						<view class="flex_box seck_tit">
							<image src="https://img.jinghushi.com/images/9/2024/12/K7jO6wmzll6V4Bn6ozBfwqWmFf4B4b.png"
								mode="widthFix"></image>
							<view class="clamp2">{{item.title}}</view>
						</view>
						<view class="flex_between seck_bt">
							<view class="flex_between">
								<view class="seck_bt_tit">最高补贴</view>
								<view class="seck_bt_num">{{Number(item.btrate)}}%</view>
							</view>
							<view class="seck_time flex_between">
								<!-- <image src="https://img.jinghushi.com/images/9/2024/11/QGyNUFPnLeGngN11be41EkgXnF4NJB.png"></image> -->
								<image
									src="https://img.jinghushi.com/images/9/2024/12/qPX9T9mEewbUgzzEpUYghExEXDe0mb.png">
								</image>
								<view class="seack_day" v-if="currSeck==3">距开始</view>
								<view class="seack_day" v-else>距结束</view>
								<view class="seack_num" v-if="currSeck==2">{{day(item.times)}}</view>
								<view class="seack_num" v-else>{{hour(item.times)}}</view>
								<view class="seack_day" v-if="currSeck==2">天</view>
								<view class="seack_day" v-else>小时</view>
								<!-- <uni-countdown v-if="currSeck==2" color="#A222E9" splitorColor="#A222E9" :font-size="13" :show-minute="false" :show-hour="false" :show-day="true" :day="day(item.times)" :hour="hour(item.times)" :minute="minute(item.times)" :second="second(item.times)" /> -->
								<!-- <uni-countdown v-else color="#A222E9" splitorColor="#A222E9" :font-size="13" :show-hour="true" :show-day="false" :day="day(item.times)" :hour="hour(item.times)" :minute="minute(item.times)" :second="second(item.times)" /> -->
							</view>
						</view>
						<view class="flex_between seck_price">
							<view class="flex_align_center">
								<view class="seck_new">
									<text class="pub_small">￥</text>{{item.agentprice}}
									<text v-if="item.hasoption==1" class="pub_small">起</text>
								</view>
								<view class="pub_old">￥{{item.productprice}}</view>
							</view>
							<view class="seck_qiang flex_align_center">
								<!-- <image src="https://img.jinghushi.com/images/9/2024/11/q4fwq4EfwweM01Y3IszLmFca40s5Ee.png"></image> -->
								<view v-if="currSeck==3">即将开售</view>
								<view v-if="currSeck!=3&&item.total!=0">立即抢购</view>
								<view v-if="currSeck!=3&&item.total==0">已抢光</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="brand_list" v-if="show&&currSeck==1">
				<view class="item" v-for="item in goodsList">
					<view class="l_head">
						<view class="l_left">
							<image :src="item.thumb"></image>
							<view class="l_left_info">
								<view class="clamp"><text>{{item.name}}</text></view>
								<view class="flex_center l_left_tag">
									<image
										src="https://img.jinghushi.com/images/9/2024/12/u9w172PP44R1fvm7Z9yj9P4p41BBPv.png">
									</image>特卖
								</view>
							</view>
						</view>
						<!-- <view class="l_btn">
							<view class="l_enter" @click="$navTo('/pages/goodlist/goodlist?brandid='+item.brandid)">进入会场</view>
						</view> -->
					</view>
					<scroll-view scroll-x="true" class="l_list">
						<view class="i_item" v-for="(ite,idx) in item.goods"
							@click="$navTo('/pages/product/product?id='+ite.id)">
							<view class="i_flex">
								<!-- <image v-if="idx==0" src="https://img.jinghushi.com/images/9/2024/12/VYy84ygt25JfV52d5EzzLf5E8Y88tg.png" class="i_tag_bao"></image> -->
								<!-- <image v-if="idx==1" src="https://img.jinghushi.com/images/9/2024/12/E323d33IpZcFIMFA7RfiiirigIm3rT.png" class="i_tag_hot"></image> -->
								<image :src="ite.thumb"></image>
								<!-- <view class="clamp">{{ite.title}}</view> -->
								<view class="i_price">
									<view class="p_new"><text class="small">￥</text>{{Number(ite.agentprice)}}</view>
								</view>
								<view class="i_price">
									<view class="p_old">￥{{ite.productprice}}</view>
								</view>
							</view>
						</view>
						<view class="i_item" @click="$navTo('/pages/goodlist/goodlist?brandid='+item.brandid)">
							<view class="i_flex">
								<image
									src="https://img.jinghushi.com/images/9/2024/11/G0MddESaZDdAEERR00YuEse1Fb2pCC.jpg"
									mode="widthFix"></image>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="like_goods" v-if="show&&currSeck==2">
				<!-- <image class="like_logo" src="https://img.jinghushi.com/images/9/2024/11/GsysyP9jSKSxss3p522axz3y3pWx9z.png"></image> -->
				<liu-waterfall :bgColor="'#FBF8FE'" :dataList.sync="guessGoods" :column="2"
					@click="wateClick"></liu-waterfall>
			</view>
		</view>
		<view class="empty_loading">
			<image v-show="isloading" src="/static/business/loading.gif" mode=""></image>
			<text v-show="isempty">没有更多了~</text>
		</view>
		<!-- <view class="no_login" v-if="!isLogin">
			<view>终于等到你! 快来享受低价消费吧~</view>
			<view class="no_btn" @click="$navTo('/pages/public/login?mid='+mid)">马上登录</view>
		</view>
		<view class="no_login" v-if="!isInfo">
			<view>完善信息，可享受更多折扣哦！</view>
			<view class="no_btn" @click="$navTo('/pages/individualism/user')">去完善</view>
		</view>
		<view v-if="!isDesktopCut" class="desktop_tip">
			<view class="up">▲</view>
			<image src="/static/close.png" @click="closeTip" mode="widthFix"></image>
			<text class="title">添加到手机桌面，使用多米街更便利</text>
			<view class="add" @click="">添加</view>
		</view> -->
	</view>
</template>

<script>
	import Jswiper from '@/components-home/pages/Jswiper.vue'
	import category from "@/home_page/components/category.vue"
	import Jsale from "@/components-home/pages/Jsale.vue"
	import shopList from "@/home_page/components/shop_list.vue"
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['Location', ''])
		},
		components: {
			Jswiper,
			category,
			Jsale,
			shopList
		},
		data() {
			return {
				isloading: false,
				isempty: false,
				currentId: 0,
				currentIdTop: 0,
				currentIndex: 0,
				currentIndexTop: 0,
				cateList: [],
				cateListTop: [],
				goodsList: [],
				page: 0,
				pageTop: 0,
				pageGuess: 0,
				isFixed: false,
				info: {
					banner: [],
				},
				meunList: [],
				keywords: '',
				mid: 0,
				isLogin: true,
				isInfo: true,
				isDesktopCut: false,
				libaoList: [],
				notice: [],
				navBgColor: '#FBF8FE',
				fixBg: '',
				scrollLeft: 0,
				scrollLeftTop: 0,
				contentScrollW: 0, // 导航区宽度
				contentScrollWTop: 0,
				curIndex: 0, // 当前选中
				curIndexTop: 0,
				saleBannerFu: [], //组合图幅图
				show: true,
				currSeck: 1,
				flashSaleList: [],
				guessGoods: [],
				address: '',
				isTop: false,
			};
		},
		onShow() {
			uni.showModal({
				title: '提示',
				content: '去补贴商城看看',
				success: res => {
					if (res.confirm) {
						console.log('用户点击确定');
						this.$navNew('/pages/mallHome/selfMall');
					} else if (res.cancel) {
						console.log('用户点击取消');
						this.$navTo('/pages/index/index');
					}
				}
			});
			if (!uni.getStorageSync('token')) {
				this.isLogin = false;
			} else {
				this.isLogin = true;
				this.getUserInfo();
			}
		},
		async onLoad(options) {
			if (options.mid) {
				this.mid = options.mid;
			}
			if (options.scene) {
				this.mid = options.scene;
			}
			uni.setStorageSync('mid', this.mid);
			if (!uni.getStorageSync('token')) {
				this.getToken();
			}
			/*#ifdef MP-WEIXIN*/
			this.getLocation();
			/*#endif*/
			this.getSeckill(); //秒杀
			this.getInfo(); //营销版块
			// this.getNotice();//通知
			this.getLibao();
			this.getCate();
			this.getCateTop();
			this.getMenu();
			this.isDesktopCut = uni.getStorageSync('isDesktopCut');
			// 猜你喜欢
			this.getGuessGoods();
			// this.getList();
			await this.$onLaunched;
			this.getCity();
			setTimeout(() => {
				this.closeTip();
			}, 4000)
		},
		onReachBottom() {
			// 	this.getList();
			if (this.currSeck == 2) {
				this.getGuessGoods();
			} else {
				if (this.isTop) {
					this.getListTop();
				} else {
					this.getList();
				}
			}
		},
		methods: {
			getLocation() {
				let that = this;
				uni.startLocationUpdateBackground({
					type: 'gcj02',
					success() {
						uni.onLocationChange(function(res) {
							console.log('成功', res)
							that.$store.commit('upLocation', {
								x: res.longitude,
								y: res.latitude
							})
							uni.setStorageSync('x', res.longitude);
							uni.setStorageSync('y', res.latitude);
							// that.getInfo();
							that.$isResolve();
						});
					},
					fail(err) {
						uni.startLocationUpdate({
							success: res => {
								uni.onLocationChange(function(res) {
									console.log('失败', res)
									that.$store.commit('upLocation', {
										x: res.longitude,
										y: res.latitude
									})
									uni.setStorageSync('x', res.longitude);
									uni.setStorageSync('y', res.latitude);
									// that.getInfo();
									that.$isResolve();
								});
							},
							fail: err => {
								that.$isResolve();
							}
						});
					}
				});
			},
			getCity() {
				this.$axios('o2o/curAddress', 'POST', 'shop', this.Location).then(res => {
					if (res.data.code == 200) {
						this.address = res.data.data.address;
						this.$store.commit('upaddress', res.data.data.address);
					}
				})
			},
			wateClick(data) {
				this.$navTo('/pages/product/product?id=' + data.id)
			},
			changeSeck(id) {
				if (this.currSeck == id) return;
				this.currSeck = id;
				if (id == 1) {
					this.scrollLeft = 0;
					this.page = 0;
					this.currentId = this.cateList[0].id;
					this.goodsList = [];
					this.getCate();
				} else {
					this.pageGuess = 0;
					this.guessGoods = [];
					this.getGuessGoods();
				}
			},
			getSeckill() {
				this.$axios('home/getCurSkill', 'POST', 'shop', {
					type: this.currSeck
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						this.flashSaleList = res.data.data.goodsList0;
					}
				})
			},
			getGuessGoods() {
				this.pageGuess++;
				this.isloading = true;
				this.isempty = false;
				this.$axios('home/guessgoods', 'POST', 'shop', {
					page: this.pageGuess
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						this.guessGoods = [...this.guessGoods, ...res.data.data];
						this.isempty = res.data.data.length <= 0;
					}
				})
			},
			second(v) {
				return Math.trunc(v % 60);
			},
			minute(v) {
				return Math.trunc(v / 60 % 60);
			},
			hour(v) {
				return Math.trunc(v / 60 / 60 % 24);
			},
			day(v) {
				return Math.trunc(v / 60 / 60 / 24);
			},
			// 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
			getScrollW() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.cate_new').boundingClientRect(data => {
					// 拿到 scroll-view 组件宽度
					this.contentScrollW = data.width
				}).exec();
				query.selectAll('.cate_new_item').boundingClientRect(data => {
					let dataLen = data.length;
					for (let i = 0; i < dataLen; i++) {
						//  scroll-view 子元素组件距离左边栏的距离
						this.cateList[i].left = data[i].left;
						//  scroll-view 子元素组件宽度
						this.cateList[i].width = data[i].width
					}
				}).exec()
			},
			// 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
			getScrollWTop() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.t_cate_list').boundingClientRect(data => {
					// 拿到 scroll-view 组件宽度
					this.contentScrollWTop = data.width
				}).exec();
				query.selectAll('.t_cate_item').boundingClientRect(data => {
					let dataLen = data.length;
					for (let i = 0; i < dataLen; i++) {
						//  scroll-view 子元素组件距离左边栏的距离
						this.cateListTop[i].left = data[i].left;
						//  scroll-view 子元素组件宽度
						this.cateListTop[i].width = data[i].width
					}
				}).exec()
			},
			changeNavBgColor(e) {
				this.navBgColor = this.info.banner[e.detail.current].bgcolor;
				this.fixBg = this.info.banner[e.detail.current].bgcolor;
			},
			getNotice() {
				this.$axios('center/notice', "POST", 'member').then(res => {
					if (res.data.code == 200) {
						this.notice = res.data.data.join(' ');
					}
				})
			},
			closeTip() {
				uni.setStorageSync('isDesktopCut', true);
				this.isDesktopCut = true;
			},
			getUserInfo() {
				this.$axios('Center/main', "POST", 'member').then(res => {
					if (res.data.code == 200) {
						this.$store.commit('uplevel', res.data.data.levelname);
						uni.setStorageSync('level', res.data.data.levelname);
						if (res.data.data.isopenavatar) {
							this.isInfo = false;
						} else {
							this.isInfo = true;
						}
					}
				})
			},
			getToken() {
				uni.login({
					provider: 'weixin',
					success: res => {
						this.$axios('login/autologin', 'POST', 'member', {
							aid: uni.getStorageSync('appid').slice(-4),
							mid: this.mid,
							code: res.code
						}).then(res => {
							if (res.data.code == 200) {
								uni.setStorageSync('token', res.data.data);
								uni.setStorageSync('Jh_recotabshops', 1);
								this.isLogin = true;
								this.getUserInfo();
								this.getSharePath();
							}
						})
					}
				})
			},
			getLibao() {
				this.$axios('home/vipgoodslist', 'POST', 'shop').then(res => {
					if (res.data.code == 200) {
						this.libaoList = res.data.data.list;
					}
				})
			},
			// 带图标分类
			getMenu() {
				this.$axios('home/shopcalss', 'POST', 'shop').then((res => {
					if (res.data.code == 200) {
						this.meunList = res.data.data;
					}
				}))
			},
			// banner
			getInfo() {
				this.$axios('home/main', "POST", 'shop').then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data;
						if (this.info.banner.length > 0) this.navBgColor = this.info.banner[0].bgcolor;
						this.fixBg = this.info.banner[0].bgcolor;
						if (this.info.saleBanner.length > 0) {
							this.info.saleBanner.forEach((item, index) => {
								if (item.mtype == 1 && item.parentid != 0) {
									this.saleBannerFu.push(item);
								}
							})
						}
					}
				})
			},
			// 顶部
			changebigCateTop(id, index) {
				if (this.currentIdTop == id) return;
				this.currSeck = 1;
				this.currentIndexTop = index;
				this.currentIdTop = id;
				this.pageTop = 0;
				this.goodsList = [];
				this.curIndexTop = index;
				this.scrollLeftTop = this.cateListTop[index].left - this.contentScrollWTop / 2 + this.cateListTop[index]
					.width / 2;
				if (id == 0) {
					this.isTop = false;
					this.currentId = this.cateList[0].id;
					this.currentIndex = 0;
					this.curIndex = 0;
					this.page = 0;
					this.goodsList = [];
					this.scrollLeft = 0;
					this.getList();
				} else {
					this.isTop = true;
					this.getListTop();
				}
			},
			// 切换分类
			changebigCate(id, index) {
				if (this.currentId == id) return;
				this.currentIndex = index;
				this.currentId = id;
				this.page = 0;
				this.goodsList = [];
				this.curIndex = index;
				this.scrollLeft = this.cateList[index].left - this.contentScrollW / 2 + this.cateList[index].width / 2;
				this.getList();
			},
			// 顶部分类
			getCateTop() {
				this.$axios('Util/categorynew', "POST", 'shop').then(res => {
					if (res.data.code == 200) {
						this.cateListTop = res.data.data.category;
						setTimeout(() => {
							// 获取标题区域宽度，和每个子元素节点的宽度
							this.getScrollWTop()
						}, 1000)
					}
				})
			},
			getListTop() {
				this.isloading = true;
				this.isempty = false;
				this.pageTop++;
				this.$axios('home/parkList', 'POST', 'shop', {
					page: this.pageTop,
					id: this.currentIdTop
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						let data = res.data.data;
						this.goodsList = [...this.goodsList, ...data];
						this.isempty = data.length <= 0;
					}
				})
			},
			// 获取分类列表
			getCate() {
				this.$axios('Util/categoryListNew', "POST", 'shop').then(res => {
					if (res.data.code == 200) {
						this.cateList = res.data.data;
						this.currentId = this.cateList[0].id;
						setTimeout(() => {
							// 获取标题区域宽度，和每个子元素节点的宽度
							this.getScrollW()
						}, 1000)
						this.getList();
					}
				})
			},
			// 商品列表
			getList(id) {
				this.isloading = true;
				this.isempty = false;
				this.page++;
				let Currid = this.currentId;
				if (id > 0) {
					Currid = id;
				}
				this.$axios('util/parkList', 'POST', 'shop', {
					page: this.page,
					id: Currid
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						let data = res.data.data;
						this.goodsList = [...this.goodsList, ...data];
						this.isempty = data.length <= 0;
						if (data.length <= 0) {
							if (this.currentIndex <= this.cateList.length) {
								this.currentIndex = this.currentIndex + 1;
								// this.currentId = this.cateList[this.currentIndex].id;
								this.page = 0;
								// this.curIndex = this.currentIndex+1;;
								// this.scrollLeft = this.cateList[this.curIndex-1].left - this.contentScrollW / 2 + this.cateList[this.curIndex-1].width / 2;
								this.getList(this.cateList[this.currentIndex].id);
							}
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FBF8FE;
		padding-bottom: 60rpx;
	}

	.Jc_swiper {
		height: 256rpx;
	}

	.Jc_swiper_image {
		width: 100%;
		height: 100% !important;
		border-radius: 12rpx;
		will-change: transform;
	}

	.fill {
		position: relative;
		// padding-top: calc(var(--status-bar-height) + 24rpx);

		.mall_swiper {
			height: 700rpx;

			.bg {
				width: 100%;
				height: 100%;
			}
		}

		.f_position {
			text-align: center;
			width: 100%;
			padding-top: calc((var(--status-bar-height)) * 2 + 150rpx);

			.f_fixed {
				position: fixed;
				width: 100%;
				top: 0;
				left: 0;
				padding: 0 20rpx;
				padding-top: calc(var(--status-bar-height) + 50rpx);
				z-index: 99;
				height: calc((var(--status-bar-height)) * 2 + 150rpx);
			}

			.top_address {
				.top_location {
					font-size: 30rpx;
					margin-right: 20rpx;

					.clamp {
						width: 92rpx;
						color: #FFFFFF;
						margin: 0 6rpx;
					}

					.location_icon {
						width: 36rpx;
						height: 34rpx;
					}

					.location_down {
						width: 16rpx;
						height: 10rpx;
					}
				}
			}

			.top_cate {
				margin-top: 20rpx;
				color: #FFFFFF;

				.t_cate_list {
					font-size: 34rpx;
					width: calc(100% - 120rpx);
					white-space: nowrap;

					.t_cate_item {
						display: inline-block;
						margin-right: 30rpx;
					}

					.t_tag_active {
						font-weight: bold;
					}
				}

				.top_cate_all {
					font-size: 28rpx;
					width: 120rpx;
					white-space: nowrap;

					image {
						width: 40rpx;
						height: 28rpx;
						margin-right: 10rpx;
					}
				}
			}

			.f_tit {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
			}

			.search {
				width: 342rpx;
				left: 0;
				transition: all 0.5s;
				border: 4rpx solid #fff;
				border-radius: 60rpx;
				height: 62rpx;
				padding: 0 24rpx;
				margin-right: 10rpx;
				background: #fff;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 14rpx;
				}

				.s_tit {
					color: #999999;
					font-size: 28rpx;
				}
			}
		}

		.top_backgeound {
			padding: 0 20rpx;
		}

		.marketing {
			box-sizing: border-box;
			column-count: 2;
			// column-count: 1;
			// column-gap: 10rpx;
			column-gap: 0;
			margin-top: 20rpx;

			image {
				// border: 2rpx solid #999;
				// background-color: #fff;
				width: 340rpx;
				break-inside: avoid;
				margin-bottom: 10rpx;
				border-radius: 10rpx;
				overflow: hidden;
			}
		}
	}

	.d_content {
		clear: both;
		background: #FBF8FE;
		padding: 0 20rpx 0;
		position: relative;
		// padding-bottom: 60rpx;
	}

	.notice_bar {
		margin-bottom: 20rpx;
		position: relative;
		// border-radius: 12rpx;
		overflow: hidden;
		width: 300rpx;
		// background: #f0e0fd;
		height: 60rpx;
		line-height: 60rpx;
		border: 4rpx solid #fff;
		border-radius: 60rpx;

		image {
			width: 40rpx;
			position: absolute;
			left: 20rpx;
			top: 4rpx;
			bottom: 0;
			margin: auto;
		}

		.uni-noticebar {
			padding: 8rpx 0 !important;
		}

		.no_bar {
			// width: 100%;
			width: calc(100% - 62rpx);
			float: right;
		}
	}

	.libao {
		// padding-top: 20rpx;
		color: #333;

		.libao_top {
			display: flex;
			align-items: center;
			// justify-content: space-between;
			// font-weight: 600;
			font-size: 36rpx;
			margin: 10rpx 0 4rpx;

			image {
				width: 180rpx;
				margin-right: 20rpx;
			}

			.libao_tip {
				padding: 0 20rpx;
				height: 42rpx;
				line-height: 42rpx;
				// background: #7E00E8;
				// box-shadow: inset 0rpx 0rpx 20rpx 0rpx rgba(255,255,255,0.5);
				// border-radius: 22rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				background: linear-gradient(90deg, rgba(128, 35, 214, 1) 0%, rgba(219, 71, 253, 1) 100%);
				border-radius: 60rpx 60rpx 60rpx 0rpx;
			}
		}

		.libao_list {
			white-space: nowrap;
			// margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.libao_item {
				// width: 31.5%;
				width: 199rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				// padding: 10rpx;
				text-align: center;
				margin-top: 16rpx;
				margin-right: 20rpx;
				display: inline-block;

				// box-shadow: 2rpx 2rpx 24rpx 4rpx rgba(0, 0, 0, 0.1);
				image {
					width: 100%;
					height: 179rpx;
					border-radius: 10rpx 10rpx 0 0;
				}

				.clamp {
					font-size: 20rpx;
					line-height: 30rpx;
				}
			}

			&::after {
				display: block;
				content: "";
				width: 31.5%;
			}
		}
	}

	.super {
		margin: 20rpx 0;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		image {
			border-radius: 8rpx;
			// margin-bottom: 10rpx;
		}

		.super_item4 {
			width: 100%;
			// height: 130rpx;
			margin-top: 2%;
		}

		.super_item3 {
			width: 32%;
			height: 110rpx;
			margin-top: 2%;
		}

		.super_item2 {
			width: 49%;
			height: 212rpx;
			margin-top: 2%;
		}

		.super_item1 {
			width: 24%;
			height: 80rpx;
			margin-top: 2%;
		}

		.d_activity {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.d_a_big {
				width: 49%;
				height: 438rpx;
			}

			.d_a_little {
				height: 438rpx;
				width: 49%;
				overflow: hidden;
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				image {
					width: 100%;
					// margin-bottom: 0;
				}

				.super_item_fu4 {
					height: 24%;
					width: 48%;
					// margin-left: 2%;
				}

				.super_item_fu3 {
					height: 32%;
					// width: 48%;
					// margin-left: 2%;
				}

				.super_item_fu2 {
					height: 48.5%;
				}

				.super_item_fu1 {
					height: 100%;
					// margin-left: 2%;
				}
			}
		}
	}

	.pack {
		background: white;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding: 10rpx 10rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
		box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);

		.pack_item {
			width: 20%;
			text-align: center;
			word-wrap: nowrap;
			margin-top: 10rpx;

			.pack_img {
				image {
					width: 80rpx;
					height: 80rpx;
				}
			}

			.pack_title {
				font-size: 24rpx;
				color: #333333;
			}
		}
	}

	#page_wp {
		// margin-top: 10rpx;
	}

	.cate {
		.c_tag_list {
			white-space: nowrap;
			height: 100%;

			.c_tag {
				display: inline-block;
				color: #999999;
				margin-right: 30rpx;
				font-size: 32rpx;
				position: relative;
				height: 100%;

				.c_tag_img {
					width: 80rpx;
					height: 80rpx;
					border: 2rpx solid #fff;
					background: #fff;
					border-radius: 50%;
					margin: 0 auto;

					image {
						width: 100%;
					}
				}
			}

			.c_tag_active {
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;
			}
		}
	}

	.cate_seckill {
		// margin-top: -70rpx;
		background: #fff;
		box-shadow: 0rpx 7.5rpx 30rpx rgba(0, 0, 0, 0.1);
		border-radius: 8rpx;

		.c_tag_list {
			display: flex;
			justify-content: space-around;
			// padding: 26rpx 0;
			line-height: 96rpx;

			.c_tag {
				color: #fff;
				margin-right: 0;
				width: 33%;
				justify-content: center;
				// line-height: 62rpx;
				display: flex;
				color: #adadad;
				align-items: center;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 8rpx;
				}
			}

			.c_tag_active {
				font-weight: bold;
				// background: #fff;
				// color: #A222E9;
				color: #333;

				&::after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 14rpx;
					transform: translateX(-50%);
					width: 50rpx;
					height: 6rpx;
					// background: linear-gradient(90deg, rgba(130, 37, 216, 1) 0%, rgba(219, 71, 253, 1) 100%);
					background: #FF2F24;
					border-radius: 6rpx;
					opacity: .8;
				}
			}
		}
	}

	.cate_new {
		white-space: nowrap;
		margin: 20rpx 0;

		.cate_new_item {
			display: inline-block;
			background: #FFFFFF;
			box-shadow: 0px 2rpx 8rpx 0px rgba(0, 0, 0, 0.1);
			line-height: 66rpx;
			padding: 0 30rpx;
			margin-right: 20rpx;
			font-size: 26rpx;
			border-radius: 10rpx;
		}

		.cate_new_item_ac {
			background: #FFDBD9;
			border: 2rpx solid #FF2F24;
			color: #FF2F24;
		}
	}

	.screen {
		display: flex;
		margin-bottom: 20rpx;

		.screen_item {
			width: 122rpx;
			line-height: 38rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			font-size: 24rpx;
			color: #999999;
			margin-right: 20rpx;
			text-align: center;
		}

		.screen_item_active {
			color: #8616E1;
		}
	}

	.nav_pos {
		background: #f8f8fe;
		position: fixed;
		top: 0;
		padding-top: calc(var(--status-bar-height) + 106rpx);
		width: 100%;
		z-index: 900;
		// margin-left: -20rpx;
		margin-right: -20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		height: auto;
		left: 0;
		margin-top: 0;

		.c_tag {
			color: #fff !important;
		}

		.c_tag_list {
			// padding-bottom: 20rpx!important;
			// padding: 16rpx 0 16rpx;
			padding: 12rpx 0 28rpx;

			.c_tag_active {
				image {
					bottom: -16rpx;
				}
			}
		}
	}

	.seck_list {
		.seck_item {
			display: flex;
			// background: #fff;
			padding: 10rpx;
			margin-bottom: 16rpx;
			border-radius: 14rpx;

			.seck_logo {
				width: 236rpx;
				height: 236rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 14rpx;
				}
			}

			.seck_info {
				width: calc(100% - 220rpx);
				padding-left: 20rpx;

				.seck_tit {
					image {
						width: 28rpx;
						margin-top: 4rpx;
					}

					.clamp2 {
						width: calc(100% - 28rpx);
						padding-left: 4rpx;
					}
				}

				.seck_bt {
					font-size: 22rpx;
					// color: #FFFFFF;
					// width: 180rpx;
					line-height: 38rpx;
					border-radius: 8rpx;
					margin: 24rpx 0;
					// justify-content: flex-start;
					overflow: hidden;

					.seck_bt_tit {
						text-align: center;
						background: #f0e1ff;
						width: 110rpx;
						white-space: nowrap;
						color: #f506a7;
					}

					.seck_bt_num {
						color: #f1cffc;
						padding: 0 6rpx;
						background: #c638f5;
						border-top-right-radius: 8rpx;
						border-bottom-right-radius: 8rpx;
					}
				}

				.seck_price {
					width: 100%;
					height: 60rpx;
					// background: linear-gradient( 90deg, #F0E1FF 0%, #fff 100%);
					background: linear-gradient(to right, #8624d9 0%, #c237f3 100%);
					border-radius: 12rpx;
					padding-left: 10rpx;
					margin-top: 8rpx;

					.seck_new {
						// color: #AF141D;
						color: #fff;
						// font-weight: bold;
						font-size: 36rpx;
						margin-right: 10rpx;
					}

					.pub_old {
						color: #dcb3f5;
						padding-top: 8rpx;
					}

					.seck_qiang {
						color: #fb66bc;
						font-weight: bold;
						background: #f0e1ff;
						border-radius: 0 10rpx 10rpx 16rpx;
						padding: 0 24rpx;
						height: 100%;
						// image{
						// 	width: 48rpx;
						// 	height: 48rpx;
						// }
					}
				}

				.seck_time {
					// color: #A222E9;
					font-size: 24rpx;

					image {
						width: 26rpx;
						height: 26rpx;
						margin-right: 10rpx;
					}

					.seck_btn {
						width: 130rpx;
						line-height: 50rpx;
						background: linear-gradient(270deg, #8917E2 0%, #B92DF1 100%);
						border-radius: 26rpx;
						color: #FFFFFF;
						justify-content: center;
						font-size: 24rpx;
					}

					.seack_day {
						color: #e26cfb;
					}

					.seack_num {
						color: #822fd6;
						font-weight: bold;
						font-size: 32rpx;
						margin: 0 6rpx;
						margin-top: -4rpx;
					}
				}
			}
		}
	}

	.brand_list {
		.item {
			padding: 16rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			margin-top: 20rpx;
			box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);

			.l_head {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;

				.l_left {
					display: flex;
					align-items: center;
					width: calc(100% - 290rpx);

					image {
						width: 96rpx;
						height: 96rpx;
						border-radius: 12rpx;
						margin-right: 20rpx;
						border: 1rpx solid #eee;
					}

					.l_left_info {
						width: calc(100% - 96rpx);

						.l_left_tag {
							color: #AC33C1;
							background: #f3e1f6;
							width: 100rpx;
							border-radius: 6rpx;
							font-size: 24rpx;
							margin-top: 12rpx;

							image {
								width: 30rpx;
								height: 30rpx;
								margin-right: 4rpx;
							}
						}
					}

					.clamp {
						font-weight: 600;
					}
				}

				.l_btn {
					display: flex;
					align-items: center;

					view {
						border-radius: 26rpx;
						height: 52rpx;
						line-height: 52rpx;
						text-align: center;
						font-size: 24rpx;
						font-weight: 600;
					}

					.l_enter {
						background: #F0E1FF;
						color: #8615E1;
						// margin-right: 20rpx;
						width: 154rpx;
					}

					.l_share {
						background: #8615E1;
						color: #FFFFFF;
						width: 112rpx;
					}
				}
			}

			.l_list {
				white-space: nowrap;
				margin-top: 20rpx;

				.i_item {
					margin-right: 14rpx;
					width: 200rpx;
					display: inline-block;

					.i_flex {
						display: flex;
						flex-direction: column;
						position: relative;
					}

					image {
						width: 100%;
						height: 200rpx;
						border-radius: 12rpx;
					}

					.i_tag_bao {
						width: 100rpx;
						height: 18rpx;
						position: absolute;
						left: 0;
						top: 0;
					}

					.i_tag_hot {
						width: 44rpx;
						height: 44rpx;
						position: absolute;
						left: 0;
						top: 0;
					}

					.clamp {
						font-size: 28rpx;
						// font-weight: 600;
						margin-bottom: 4rpx;
					}

					.i_price {
						display: flex;
						align-items: center;
						flex-wrap: wrap;

						.p_new {
							font-size: 30rpx;
							// color: #AF141D;
							// font-weight: bold;
							margin-right: 6rpx;

							.small {
								font-size: 20rpx;
							}
						}

						.p_old {
							color: #999999;
							font-size: 20rpx;
							text-decoration: line-through;
						}
					}

					.vip_price {
						color: #AF141D;
						font-size: 26rpx;
						font-weight: bold;

						.small {
							font-size: 20rpx;
							font-weight: 400;
						}
					}
				}
			}

			.line_list {
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				justify-content: space-between;
				margin-bottom: -20rpx;

				.i_item {
					width: 210rpx;
					margin-bottom: 20rpx;
					margin-right: 0;

					image {
						height: 210rpx;
					}
				}

				&::after {
					display: block;
					content: '';
					width: 210rpx;
				}
			}
		}
	}

	.like_logo {
		width: 300rpx;
		height: 44rpx;
		margin: 40rpx auto 0;
		display: block;
	}
</style>